<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>缩放旋转效果</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.tran{
		display:block;
    	line-height:100px;
    	width:100px;
    	background:#beceeb;
    	margin:30px auto;
    	text-align:center;
    	transition: all 2s ease-in-out;
	}
	.tran:hover{
		transform:rotate(720deg) scale(2,2);
	}

	/*碰我就闪现CSS*/
	.fadeImage,.trans_fade_image{
		position: absolute;
		-webkit-transition: opacity 1s ease-in-out;
    	-moz-transition: opacity 1s ease-in-out;
    	-o-transition: opacity 1s ease-in-out;
		transition: opacity 1s ease-in-out; 
	}
	.fadeImage:hover{
		opacity:0;
		filter: alpha(opacity=0);
	}

	/*点我就闪现CSS*/
	.trans_fade_image_click {
    	opacity:0;
    	filter: alpha(opacity=0);
	}
	span{
		position: relative;
	}
	div{
		display: inline-block;
	}


	/*碰我就飞走CSS*/
	.anim_image{
		-webkit-transition: all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	-o-transition: all 1s ease-in-out;
    	transition: all 1s ease-in-out;
    	cursor:pointer;
	}
	.anim_image_top {
    	position: absolute;
    	-webkit-transform: scale(0, 0);
    	opacity: 0;
    	filter: Alpha(opacity=0);
	}

	.anim_box:hover .anim_image_top , .anim_box_hover .anim_image_top {
    	opacity: 1;
    	filter: Alpha(opacity=100);
    	-webkit-transform: scale(1, 1);
    	-webkit-transform-origin: top right;        
	}
	.anim_box:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    	-webkit-transform: scale(0, 0);
    	-webkit-transform-origin: bottom left;
	}


	/*碰我就旋转CSS*/
	.anim_box2 .anim_image_top {
    	position: absolute;
    	-webkit-transform:scale(1,0);
    	opacity: 0;
    	filter: Alpha(opacity=0);
	}
	.anim_box2:hover .anim_image_top , .anim_box2_hover .anim_image_top {
    	opacity: 1;
    	filter: Alpha(opacity=100);
    	-webkit-transform: scale(1, 1);     
	}
	.anim_box2:hover .anim_image_bottom, .anim_box_hover .anim_image_bottom {
    	-webkit-transform: rotate(360deg) scale(0, 0);
	}
</style>
<script>
	window.onload=function(){
		var oImg = document.getElementById("imgBox").getElementsByTagName("img");
		oImg[0].onclick = function(){
			var cl = this.className;
			if(/click/.test(cl)){
				this.className = "trans_fade_image";
			}
			else {
				this.className = "trans_fade_image trans_fade_image_click";
			}
		}
	}
	// (function(){
	// 	var oImg = document.getElementById("imgBox");
	// 	alert(oImg);
	// })();
</script>
<body>
    <div class="tran">碰我试试</div>
    <div>
    	<img class="fadeImage" src="../images/dog1.jpg" alt="dog1">
    	<img src="../images/dog2.jpg" alt="dog2">
		<span>碰我我就闪现</span>
	</div>
	<div id="imgBox">
    	<img class="trans_fade_image" src="../images/dog1.jpg" alt="dog1">
    	<img src="../images/dog2.jpg" alt="dog2">
    	<span>点我我就闪现</span>
    </div>
    <div id="imgBox2"  class="anim_box">
    	<img class="anim_image anim_image_top" src="../images/dog1.jpg" alt="">
    	<img class="anim_image anim_image_bottom" src="../images/dog2.jpg" alt="">
    	<span>碰我我就飞</span>
    </div>
    <div id="imgBox3"  class="anim_box2">
    	<img class="anim_image anim_image_top" src="../images/dog1.jpg" alt="">
    	<img class="anim_image anim_image_bottom" src="../images/dog2.jpg" alt="">
    	<span>碰我我就旋转</span>
    </div>    
</body>
</html>